import React, { useEffect } from 'react';
import { Table, Tag, Modal, Popover, Switch, message, Alert, Button, Row, Col, Spin, Space } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, ReloadOutlined, InfoCircleOutlined, StopOutlined } from '@ant-design/icons';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getRightsTree, updateRightState, updateChildRightState, deleteRight, deleteChildRight } from '../../../api/rightsApi';
import type { TableColumnsType } from 'antd';
import useSimpleAuth from '../../../hooks/useSimpleAuth';
import SimplePermissionButton from '../../../components/permission/SimplePermissionButton';
import { STORAGE_KEYS } from '../../../constants/common';
import { useNavigate } from 'react-router-dom';
import './RightList.scss';
import auth from '../../../utils/auth';
import { store } from '../../../store';

const { confirm } = Modal;

// 定义权限项接口，与Right类型相似但children允许是string
interface RightItem {
  id: string | number;  
  _id?: string;         
  title: string;        
  key: string;          
  pagepermisson?: number; 
  grade: number;        
  children?: RightItem[] | string;
  rightId?: string | number;
  seqId?: number;      
}

/**
 * 获取权限的唯一ID，兼容MongoDB格式
 * @param item 权限项
 * @returns 用于表格rowKey的唯一标识
 */
const getRightId = (item: RightItem): string => {
  // 优先使用MongoDB的_id
  if (item._id) {
    return item._id;
  }
  
  // 其次使用id字段
  if (typeof item.id === 'string' || typeof item.id === 'number') {
    return item.id.toString();
  }
  
  // 最后使用seqId或其他可能的唯一标识
  return item.seqId?.toString() || Math.random().toString();
};

const RightList: React.FC = () => {
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  
  // 使用简化版权限钩子
  const { isSuperAdmin } = useSimpleAuth();
  
  // 如果不是超级管理员，重定向到首页
  useEffect(() => {
    if (!isSuperAdmin()) {
      message.error('您没有权限访问该页面');
      navigate('/home');
    }
  }, [isSuperAdmin, navigate]);

  // 使用React Query获取权限列表
  const { data: rightsList, isLoading, error, refetch } = useQuery({
    queryKey: ['rights'],
    queryFn: async () => {
      try {
        console.log('重新获取权限列表数据');
        const res = await getRightsTree();
        console.log('权限列表API响应:', res); // 调试日志
        
        // 确保list是数组再处理
        if (Array.isArray(res)) {
          // 处理数据，确保children字段格式正确
          return res.map((item: RightItem) => {
            // 如果children是空数组，保留它而不是转换为空字符串
            // 这样Table组件才能正确处理树形结构
            if (item.children && Array.isArray(item.children) && item.children.length === 0) {
              // 如果确实需要渲染展开图标，则删除空的children
              delete item.children;
            }
            return item;
          });
        } else {
          console.error('权限数据不是数组格式:', res);
          return []; // 返回空数组避免类型错误
        }
      } catch (err) {
        console.error('获取权限列表失败:', err);
        throw err;
      }
    },
    staleTime: 0, // 禁用缓存
    refetchOnMount: true, // 组件挂载时重新获取
    refetchOnWindowFocus: true // 窗口获得焦点时重新获取
  });
  
  // 添加路由监听，每次路由到此页面都重新获取数据
  useEffect(() => {
    console.log('RightList组件挂载或更新，重新获取数据');
    refetch();
  }, [refetch]);
  
  // 添加调试日志
  useEffect(() => {
    if (rightsList) {
      console.log('处理后的权限列表数据:', rightsList);
    }
    if (error) {
      console.error('权限列表查询错误:', error);
    }
  }, [rightsList, error]);

  // 更新一级权限状态
  const updateRightMutation = useMutation({
    mutationFn: ({ id, pagepermisson }: { id: number | string, pagepermisson: number }) => 
      updateRightState(id, pagepermisson),
    onSuccess: () => {
      message.success('修改权限成功');
      queryClient.invalidateQueries({ queryKey: ['rights'] });
    },
    onError: () => {
      message.error('修改权限失败');
    }
  });

  // 更新二级权限状态
  const updateChildRightMutation = useMutation({
    mutationFn: ({ id, pagepermisson }: { id: number | string, pagepermisson: number }) => 
      updateChildRightState(id, pagepermisson),
    onSuccess: () => {
      message.success('修改权限成功');
      queryClient.invalidateQueries({ queryKey: ['rights'] });
    },
    onError: () => {
      message.error('修改权限失败');
    }
  });

  // 删除一级权限
  const deleteRightMutation = useMutation({
    mutationFn: (id: number | string) => deleteRight(id),
    onSuccess: () => {
      message.success('删除权限成功');
      queryClient.invalidateQueries({ queryKey: ['rights'] });
    },
    onError: () => {
      message.error('删除权限失败');
    }
  });

  // 删除二级权限
  const deleteChildRightMutation = useMutation({
    mutationFn: (id: number | string) => deleteChildRight(id),
    onSuccess: () => {
      message.success('删除权限成功');
      queryClient.invalidateQueries({ queryKey: ['rights'] });
    },
    onError: () => {
      message.error('删除权限失败');
    }
  });

  const switchMethod = (item: RightItem) => {
    const newPagepermisson = item.pagepermisson === 1 ? 0 : 1;
    
    // 获取有效ID，优先使用MongoDB的_id
    const itemId = item._id || item.id;
    
    console.log('切换权限项:', item);
    console.log('使用的ID:', itemId);
    
    if (!itemId) {
      message.error('无法获取权限ID');
      return;
    }
    
    if (item.grade === 1) {
      updateRightMutation.mutate({ 
        id: itemId, 
        pagepermisson: newPagepermisson 
      });
    } else {
      updateChildRightMutation.mutate({ 
        id: itemId, 
        pagepermisson: newPagepermisson 
      });
    }
  };

  const confirmMethod = (item: RightItem) => {
    confirm({
      title: '删除权限',
      icon: <ExclamationCircleOutlined style={{ color: 'red' }} />,
      content: (
        <div>
          <p><strong>您确定要删除 "{item.title}" 权限吗？</strong></p>
          <p>删除一级权限将会同时删除其下所有子权限，此操作不可恢复！</p>
          <p>删除权限可能会影响相关用户的系统访问权限。</p>
        </div>
      ),
      okText: '确定删除',
      okButtonProps: { danger: true },
      cancelText: '取消',
      onOk() {
        deleteMethod(item);
      }
    });
  };

  // 删除
  const deleteMethod = (item: RightItem) => {
    // 获取有效ID，优先使用MongoDB的_id
    const itemId = item._id || item.id;
    
    if (!itemId) {
      message.error('无法获取权限ID');
      return;
    }
    
    if (item.grade === 1) {
      deleteRightMutation.mutate(itemId);
    } else {
      deleteChildRightMutation.mutate(itemId);
    }
  };

  const columns: TableColumnsType<RightItem> = [
    {
      title: 'ID',
      dataIndex: 'seqId',
      render: (seqId: string | number) => {
        return <b>{seqId}</b>;
      },
      width: '15%'
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      width: '20%'
    },
    {
      title: "权限路径",
      dataIndex: 'key',
      render: (key: string) => {
        return <Tag color="blue">{key}</Tag>;
      },
      width: '35%'
    },
    {
      title: "操作",
      render: (_, item: RightItem) => {
        return (
          <div>
            <SimplePermissionButton 
              danger 
              shape="circle" 
              icon={<DeleteOutlined />} 
              onClick={() => confirmMethod(item)}
              style={{ marginRight: '10px' }}
              permission="delete.right"
              disableOnNoPermission={false}
              tooltipTitle="删除权限"
            />
            
            <Popover 
              content={
                <div style={{ textAlign: "center" }}>
                  <Switch 
                    checked={item.pagepermisson === 1} 
                    onChange={() => switchMethod(item)}
                    checkedChildren="显示"
                    unCheckedChildren="隐藏"
                  />
                </div>
              } 
              title="权限可见性配置" 
              trigger={item.pagepermisson === undefined ? [] : 'click'}
            >
              <SimplePermissionButton 
                type="primary" 
                shape="circle" 
                icon={<EditOutlined />} 
                disabled={item.pagepermisson === undefined}
                permission="update.right"
                disableOnNoPermission={false}
                tooltipTitle="配置权限在侧边栏的显示或隐藏"
              />
            </Popover>
          </div>
        );
      },
      width: '30%'
    }
  ];

  // 处理应用权限变更
  const handleApplyPermissionChanges = () => {
    // 获取当前用户信息
    const currentUser = auth.getUserInfo();
    
    if (!currentUser) {
      message.error('未能获取当前用户信息，请重新登录');
      return;
    }
    
    // 获取当前用户角色ID
    const roleId = currentUser.roleId || (currentUser.role && currentUser.role.id);
    
    if (!roleId) {
      message.error('未能获取当前用户角色信息');
      return;
    }
    
    // 清除权限相关缓存
    localStorage.removeItem(STORAGE_KEYS.USER_RIGHTS);
    
    // 确保PERMISSIONS键存在且为字符串
    if (STORAGE_KEYS.PERMISSIONS && typeof STORAGE_KEYS.PERMISSIONS === 'string') {
      localStorage.removeItem(STORAGE_KEYS.PERMISSIONS);
    }
    
    try {
      // 从当前获取的权限列表数据提取可见权限（pagepermisson=1）
      const collectVisibleRights = (items: RightItem[]): string[] => {
        let rights: string[] = [];
        
        if (!Array.isArray(items)) return rights;
        
        items.forEach(item => {
          // 只添加可见的权限（pagepermisson=1）
          if (item.pagepermisson === 1) {
            rights.push(item.key);
          }
          
          // 递归处理子权限
          if (item.children && Array.isArray(item.children)) {
            rights = [...rights, ...collectVisibleRights(item.children)];
          }
        });
        
        return rights;
      };
      
      // 从当前权限列表中提取可见权限
      const visibleRights = collectVisibleRights(rightsList || []);
      
      console.log('更新后的可见权限列表:', visibleRights);
      
      // 使用auth工具更新权限
      auth.setUserRights(visibleRights);
      
      // 更新Redux状态
      if (store.dispatch) {
        store.dispatch({ type: 'user/setRights', payload: visibleRights });
      }
      
      // 更新当前用户对象中的权限
      if (currentUser.role) {
        currentUser.role.rights = visibleRights;
        auth.setUserInfo(currentUser);
      }
      
      // 显示成功消息
      message.success('权限已更新，应用新权限...');
      
      // 延迟一下再刷新侧边栏菜单，让用户看到提示
      setTimeout(() => {
        // 触发一个React状态更新，而不是强制刷新整个页面
        queryClient.invalidateQueries({ queryKey: ['rights'] });
      }, 1000);
    } catch (error) {
      console.error('应用权限变更时出错:', error);
      message.error('应用权限变更失败，请刷新页面重试');
    }
  };
  
  // 如果用户不是超级管理员，显示权限不足提示
  if (!isSuperAdmin()) {
    return (
      <div style={{ padding: '50px', textAlign: 'center' }}>
        <h2><StopOutlined style={{ color: 'red' }} /> 权限不足</h2>
        <p>只有超级管理员才能访问权限管理页面</p>
        <Button type="primary" onClick={() => navigate('/home')}>
          返回首页
        </Button>
      </div>
    );
  }

  // 处理加载状态
  if (isLoading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px 0' }}>
        <Spin size="large" tip="加载权限数据中..." />
      </div>
    );
  }

  // 确保dataSource始终是数组
  const dataSource = Array.isArray(rightsList) ? rightsList : [];
  
  return (
    <div className="right-list-container">
      {error && (
        <div style={{ color: 'red', marginBottom: '16px' }}>
          加载权限列表出错，请刷新页面重试
        </div>
      )}
      
      {/* 添加权限提示信息 */}
      <Alert
        message="权限管理"
        description="在这里您可以管理系统权限项，配置权限是否在侧边栏中可见以及删除权限。权限控制将影响菜单显示和功能访问。"
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
      />
      
      {/* 应用权限变更提示和按钮 */}
      <div style={{ 
        margin: '20px 0', 
        padding: '10px 15px', 
        background: '#f0f9ff', 
        border: '1px solid #91caff',
        borderRadius: '4px'
      }}>
        <Row align="middle" justify="space-between">
          <Col>
            <p style={{ margin: 0 }}>
              <InfoCircleOutlined style={{ marginRight: '8px', color: '#1677ff' }} />
              <span>权限变更后需要应用更改才能生效。点击右侧按钮应用更改并刷新页面。</span>
            </p>
          </Col>
          <Col>
            <Space>
              <Button 
                type="primary"
                onClick={handleApplyPermissionChanges}
                icon={<ReloadOutlined />}
              >
                应用权限变更
              </Button>
            </Space>
          </Col>
        </Row>
      </div>
      
      <Table 
        dataSource={dataSource} 
        columns={columns}
        pagination={{
          pageSize: 10
        }}
        rowKey={getRightId}
        bordered
        expandable={{
          expandRowByClick: true,
          childrenColumnName: 'children'
        }}
      />
    </div>
  );
};

export default RightList; 